<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ul li {
        display: inline-block;
        /* width: 20px; */
        list-style: none;
        /* float: left; */
        margin: 0 5px;
      }
      .color {
        background-color: skyblue;
      }
      .box {
        display: block;
        background-color: pink;

        float: left;
        width: 300px;
        height: 300px;
      }
      .box > div {
        display: none;
      }
      .box .box1 {
        /* background-color: pink; */
        display: block;
      }
    </style>
  </head>
  <body>
    <ul>
      <li data-index="0" class="color">鞠婧祎</li>
      <li data-index="1">胡歌</li>
      <li data-index="2">饭思思</li>
      <li data-index="3">胡歌</li>
      <li data-index="4">鞠婧祎</li>
    </ul>
    <div class="box">
      <div class="box1"><img src="../day1/jujingyi.jpg" alt="" /></div>
      <div><img src="../day1/huge.jpg" alt="" /></div>
      <div><img src="../day1/fansisi.jpg" alt="" /></div>
      <div><img src="../day1/huge.jpg" alt="" /></div>
      <div><img src="../day1/jujingyi.jpg" alt="" /></div>
    </div>

    <script>
      var ul = document.querySelector('ul');
      var box1 = document.querySelectorAll('.box >div');

      ul.onclick = function (e) {
        for (var i = 0; i < ul.children.length; i++) {
          ul.children[i].className = '';
          box1[i].className = '';
        }
        e.target.className = 'color';
        var index = e.target.getAttribute('data-index');
        box1[index].className = 'box1';
      };
    </script>
  </body>
</html>
